<template>
  <a-input-group compact>
    <a-select v-model:value="selectedOption" @change="handleSelectChange">
      <a-select-option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.label }}
      </a-select-option>
    </a-select>
    <a-input v-model:value="showText" @input="backValue" style="width: 50%" />
    <slot></slot>
    <!-- 添加插槽 -->
  </a-input-group>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { propTypes } from '/@/utils/propTypes';

  export default defineComponent({
    name: 'SelectAndInput',
    props: {
      value: propTypes.string.def(''),
      options: {
        type: Array,
        default: () => [
          { value: '0', label: '小于' },
          { value: '1', label: '大于' },
        ],
      },
      placeholder: propTypes.string.def(''),
    },
    emits: ['change', 'update:value'],
    setup(props, { emit }) {
      const showText = ref('');
      const selectedOption = ref('0');

      watch(
        () => props.value,
        () => {
          initVal();
        },
        { immediate: true }
      );

      function initVal() {
        const va = props.value?.split(',');
        selectedOption.value = va?.[0] || '0';
        showText.value = va?.[1] || '';
        emitValue();
      }

      function handleSelectChange(value) {
        selectedOption.value = value;
        emitValue();
      }

      function backValue(e) {
        showText.value = e?.target?.value ?? '';
        emitValue();
      }

      function emitValue() {
        const combinedValue = `${selectedOption.value},${showText.value}`;
        emit('change', combinedValue);
        emit('update:value', combinedValue);
      }

      return {
        showText,
        selectedOption,
        handleSelectChange,
        backValue,
      };
    },
  });
</script>

<style scoped></style>
